<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul li{
      list-style: none;
    }
    .center{
      width: 1400px;
      margin: auto;
      overflow: hidden;
    }
    .center2{
      width: 1700px;
      margin: auto;
      overflow: hidden;
    }
    .center3{
      width: 1850px;
      margin: auto;
      overflow: hidden;
    }
    .navigation{
      background-color: #f6f6f6;
      width: 100%;
      margin: auto;
      height: 3vw;
      min-height: 40px;
      line-height:3vw ;
      position: fixed;
      top: 0;
      z-index: 1;
    }
    .navigation>div:nth-child(2)>div>span{
      margin: 15px;
    }
    .navigation .span1{
      font-size: 30px;
    }
    .navigation .div1{
      font-size: 20px;
    }
    .bg-big{
      transform: translateY(50px);
    }
    .footer{
      width: 100%;
      height: 30vh;
      background-color: #ddd;
      margin-top: 50px;
    }
    @media(min-width:500px) {
      .bg-big img{
      width: 44vw;
      height: 50vw;
      margin-top: 40px;
      }
      .bg-big>div>div>div>div{
        transform: translate(300px,-300px);
    }
    .bg-big>div>div>div>div{
        transform: translate(350px,-300px);
    }
    .bg-big>div>div>div>div>button{
      width: 120px;
      background-color: transparent;
      border: 1px solid white;
      color: white;
    }
    .fixed-field{
      position: fixed;
      bottom: 80px;
      right: 0;
      width: 150px;
    }
  }
    @media(max-width:500px) {
      .bg-big img{
      width: 90vw;
      transform: translateX(-18px);
      }
      .center{
      width: 80vw;
      margin: auto;
      }
      .center2{
      width: 80vw;
      margin: auto;
      }
      .center3{
      width: 80vw;
      margin: auto;
      }
      .flat-patternmaking img{
        width: 40vw;
      }
      .bg-big>div>div>div>div{
        transform: translate(80px,-200px);
      }
      .bg-big>div>div>div>div>button{
      width: 200px;
      transform: translateX(-40px);
      background-color: transparent;
      border: 1px solid white;
      color: white;
      margin-top: 20px;
    }
    }
  </style>
</head>

<body>
  <div class="navigation">
    <div>
      <div class="pos-f-t">
        <nav class="navbar navbar-light bg-light d-sm-none d-block">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </nav>
        <div class="collapse" id="navbarToggleExternalContent">
          <div class="bg-light p-4 d-flex flex-column">
            <h4 class="text-dark mt-1">ARMANI</h4>
            <span class="text-muted mt-5">折扣精品</span>
            <span class="text-muted mt-5">男士</span>
            <span class="text-muted mt-5">女士</span>
            <span class="text-muted mt-5">礼赠</span>
            <span class="text-muted mt-5">全新资讯</span>
            <span class="text-muted mt-5">LIFESTYLE</span>
          </div>
        </div>
        
      </div>
    </div>
    <div class="center d-flex justify-content-between">
      <div class="d-none d-sm-block">
        <span class="span1">ARMANI</span>
        <span><a href="" class="text-danger">折扣精品</a></span>
        <span><a href="" class="text-dark">男士</a></span>
        <span><a href="" class="text-dark">女士</a></span>
        <span><a href="" class="text-dark">礼赠</a></span>
        <span><a href="" class="text-dark">全新资讯</a></span>
        <span><a href="" class="text-dark">LIFESTYLE</a></span>
      </div>
      <div class="d-none d-sm-block div1">
        <span>❤</span>
        <span>✿</span>
        <span>✉</span>
      </div>
    </div>
  </div>
  <div class="bg-big mt-5" id="top">
     <div class="center2">
      <h1 class="text-center mt-5">FALL WINTER 2021 SALE</h1>
      <h2 class="text-center mt-5 text-secondary">EMPORIO ARMANI</h2>
      <div class="row">
        <div class="col-sm-6 col-12">
          <img src="./arma_img/6K1MA6_1JHSZ_0999_D.jpg" alt="">
          <div>
            <h3 class="text-white">男士折扣精品</h3>
            <button class="btn ml-3">立即购买</button>
          </div>
      </div>
      <div class="col-sm-6 col-12">
        <img src="./arma_img/B1L340_B1142_999_D.jpg" alt="">
        <div>
          <h3 class="text-white">女士折扣精品</h3>
          <button class="btn ml-3">立即购买</button>
        </div>
    </div>
    </div>
     </div>
  </div>
  <div class="flat-patternmaking">
    <div class="center3">
      <div class="row">
        <div class="col-sm-3 col-6">
          <img src="./arma_img/6k1mwb_1m40z_0630_d_2.jpg" alt="">
          <p>潮流毛衣</p>
          <p>¥ 19,950</p>
        </div>
        <div class="col-sm-3 col-6">
          <img src="./arma_img/6KPB19_PN4GZ_1939_D.jpg" alt="">
          <p>同款大衣</p>
          <p>¥ 39,950</p>
        </div>
        <div class="col-sm-3 col-6">
          <img src="./arma_img/6KPB26_PN8MZ_1200_D.jpg" alt="">
          <p>时尚冬季新装</p>
          <p>¥ 59,940</p>
        </div>
        <div class="col-sm-3 col-6">
          <img src="./arma_img/6KPP74_PJ16Z_1200_D.jpg" alt="">
          <p>新款冬裤</p>
          <p>¥ 9,950</p>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-big mt-5">
    <div class="center2">
     <h1 class="text-center mt-5 display-1">EA7</h1>
     <h2 class="text-center mt-5 text-secondary">EMPORIO ARMANI</h2>
     <div class="row">
       <div class="col-sm-6 col-12">
         <img src="./arma_img/6K1B64_1NWNZ_0048_F.jpg" alt="">
         <div>
           <h3 class="text-white">男士折扣精品</h3>
           <button class="btn ml-3">立即购买</button>
         </div>
     </div>
     <div class="col-sm-6 col-12">
       <img src="./arma_img/6ktb11_tn5lz_1200_d_3.jpg" alt="">
       <div>
         <h3 class="text-white">女士折扣精品</h3>
         <button class="btn ml-3">立即购买</button>
       </div>
   </div>
   </div>
    </div>
 </div>
 <div class="flat-patternmaking">
   <div class="center3">
     <div class="row">
       <div class="col-sm-3 col-6">
         <img src="./arma_img/6KTB30_TN5LZ_1100_D.jpg" alt="">
         <p>FADAF新款</p>
         <p>¥ 49,150</p>
       </div>
       <div class="col-sm-3 col-6">
         <img src="./arma_img/B1PWB0_B1881_999_D.jpg" alt="">
         <p>DAGE女裤</p>
         <p>¥ 7,950</p>
       </div>
       <div class="col-sm-3 col-6">
         <img src="./arma_img/625040_1a316_00534_f.jpg" alt="">
         <p>FPEFOP围巾</p>
         <p>¥ 3,940</p>
       </div>
       <div class="col-sm-3 col-6">
         <img src="img3/6KTB19_TN8AZ_1200_D.jpg" alt="">
         <p>ORAI新款上衣</p>
         <p>¥ 89,950</p>
       </div>
     </div>
   </div>
 </div>
 <div class="footer d-sm-block d-none">
   <div class="center d-flex justify-content-between">
     <div class="mt-5">
       <h4 class="mb-4">用户支持</h4>
       <ul>
        <li class="mt-5">联系我们</li>
        <li class="mt-3">联系客服</li>
        <li class="mt-3">4006 033 252</li>
      </ul>
     </div>
     <div class="mt-5">
      <h4 class="mb-4">帮助中心</h4>
      <ul>
       <li class="mt-5">购物指南</li>
       <li class="mt-3">常见问题</li>
       <li class="mt-3">配送服务</li>
       <li class="mt-3">退货政策</li>
     </ul>
    </div>
    <div class="mt-5">
      <h4 class="mb-4">专属服务</h4>
      <ul>
       <li class="mt-5">免费标准配送</li>
       <li class="mt-3">免费礼品包装</li>
       <li class="mt-3">腕表真伪鉴定</li>
       <li class="mt-3">切换国家地区</li>
     </ul>
    </div>
    <div class="mt-5">
      <h4 class="mb-4">关于ARMANI</h4>
      <ul>
       <li class="mt-5">公司信息</li>
       <li class="mt-3">隐私政策</li>
       <li class="mt-3">销售条款</li>
       <li class="mt-3">使用条款与条件</li>
     </ul>
    </div>
    <div class="mt-5">
      <h4 class="mb-4">关注ARMANI</h4>
      <ul>
       <li class="mt-5">微信</li>
       <li class="mt-3">微博</li>
       <li class="mt-3">优酷</li>
     </ul>
    </div>
   </div>
 </div>
 <div id="accordion" class="d-sm-none d-block">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0 text-center">
        <button class="btn btn-link text-dark" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          用户支持
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <ul class="text-center">
          <li>联系我们</li>
          <li class="mt-3">联系客服</li>
          <li class="mt-3">4006 033 252</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0 text-center">
        <button class="btn btn-link collapsed text-dark" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          帮助中心
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        <ul class="text-center">
          <li>购物指南</li>
          <li class="mt-3">常见问题</li>
          <li class="mt-3">配送服务</li>
          <li class="mt-3">退货政策</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0 text-center">
        <button class="btn btn-link collapsed text-dark" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          专属服务
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        <ul class="text-center">
          <li>免费标准配送</li>
          <li class="mt-3">免费礼品包装</li>
          <li class="mt-3">腕表真伪鉴定</li>
          <li class="mt-3">切换国家/地区</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingFour">
      <h5 class="mb-0 text-center">
        <button class="btn btn-link collapsed text-dark" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          关于ARMANI
        </button>
      </h5>
    </div>
    <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
      <div class="card-body">
        <ul class="text-center">
          <li>公司信息</li>
          <li class="mt-3">隐私政策</li>
          <li class="mt-3">销售条款</li>
          <li class="mt-3">使用条款与条件</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingFive">
      <h5 class="mb-0 text-center">
        <button class="btn btn-link collapsed text-dark" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          关注ARMANI
        </button>
      </h5>
    </div>
    <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
      <div class="card-body">
        <ul class="text-center">
          <li>微信</li>
          <li class="mt-3">微博</li>
          <li class="mt-3">优酷</li>
        </ul>
      </div>
    </div>
  </div>
</div>
 <div class="fixed-field">
   <div class="bg-dark text-white p-2 text-center">联系客服</div>
   <div class="border p-2 text-center bg-light"><a href="#top" class="text-dark">︿ 回到顶部</a></div>
 </div>
</body>

</html>